<template>
    <div>
        <van-field clickable :value="pValue" placeholder="请选择" @click="showCalendar = true">
            <template #label>
                <span class="isStars" v-if="required">*</span>
                <span>{{ itemLabel }}</span>
            </template>
        </van-field>
        <van-calendar v-model="showCalendar" @confirm="onConfirm" :show-confirm="false" />
    </div>
</template>

<script>
    export default {
        model: {
            prop: 'pValue',  // 接受父值，用于显示
            event: 'eValue', // 传给父的标记
        },
        props: {
            pValue: {
                type: String,
			    default: ''
            },
            required: {
                type: Boolean,
                default: false,
            },
            itemLabel: {
                type: String
            }
        },
        data () {
            return {
                showCalendar: false, // 日期
            };
        },
        created () {},
        computed: {},
        mounted () {},
        watch: {},
        methods: {
            onConfirm(date) {
                let value = `${date.getFullYear()}-${date.getMonth() + 1}-${date.getDate()}`;
                this.$emit("eValue", value);
                this.showCalendar = false;
            },
        }
    };
</script>

<style scoped lang="less">
.isStars {
    color: red !important;
    margin-right: 6px;
}
</style>